<template>
  <!-- 签到 -->
  <div class="sign">
    <div class="siandiv">
      <div class="signline"></div>
      <div class="signicon"></div>
      <div class="signtxt"></div>
      <div class="signbtn">
        <button>我要签到</button>
      </div>
    </div>
    <div class="maskbg"></div>
  </div>
</template>

<script>
const HDScene = window.liveHDScene
export default {
  methods: {
    addEvents() {
      // 签到
      HDScene.onStartRollCall({
        callback: data => {
          if (window.ROLLCALL_INTERVAL_TIMER > 0) {
            clearInterval(window.ROLLCALL_INTERVAL_TIMER)
            window.ROLLCALL_INTERVAL_TIMER = -1
          }
          var rid = data.rollcallId,
            pid = data.publisherId,
            time = data.duration
          $('.signtxt')
            .html('签到倒计时: <span id="signtime">00:00</span>')
            .css('margin-top', '75px')
          $('.signbtn button').show()
          $('#signtime').text(timeFormat(time))
          $('.sign').show()
          $('.signbtn button').click(function() {
            HDScene.answerRollcall(rid, pid)
            $('.sign').hide()

            if (window.ROLLCALL_INTERVAL_TIMER > 0) {
              clearInterval(window.ROLLCALL_INTERVAL_TIMER)
              window.ROLLCALL_INTERVAL_TIMER = -1
            }
          })

          window.ROLLCALL_INTERVAL_TIMER = setInterval(function() {
            if (time > 1) {
              time--
              $('#signtime').text(timeFormat(time))
            } else {
              $('.signtxt')
                .html('签到结束')
                .css('margin-top', '90px')
              $('.signbtn button').hide()
              setTimeout(function() {
                $('.sign').hide()
              }, 2000)
              if (window.ROLLCALL_INTERVAL_TIMER > 0) {
                clearInterval(window.ROLLCALL_INTERVAL_TIMER)
                window.ROLLCALL_INTERVAL_TIMER = -1
              }
            }
          }, 1000)
        }
      })

      function timeFormat(time) {
        var t = parseInt(time),
          h,
          i,
          s
        h = Math.floor(t / 3600)
        h = h ? h + ':' : ''
        i = h ? Math.floor((t % 3600) / 60) : Math.floor(t / 60)
        s = Math.floor(t % 60)
        i = i > 9 ? i : '0' + i
        s = s > 9 ? s : '0' + s
        return h + i + ':' + s
      }
    }
  },
  mounted() {
    this.addEvents()
  }
}
</script>

<style>
/*--sign--*/
.sign {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999999;
  display: none;
}
.maskbg {
  background: #000;
  filter: alpha(opacity=40);
  opacity: 0.4;
  width: 100%;
  height: 100%;
}
.siandiv {
  width: 300px;
  height: 200px;
  background: #fff;
  z-index: 999;
  border: 1px solid #5ab3fc;
  border-radius: 4px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5), inset 0px -4px 0px 0px #55b1ff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
}
.signicon {
  background: url(~@views/live/cc/assets/images/sign01.png) no-repeat;
  width: 58px;
  height: 58px;
  background-size: 100%;
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -29px;
}
.signtxt {
  font-size: 18px;
  color: #55b1ff;
  line-height: 18px;
  text-align: center;
  margin-top: 75px;
}
.signbtn {
  text-align: center;
}
.signbtn button {
  background: #55b1ff;
  border-radius: 100px;
  width: 158px;
  height: 38px;
  color: #fff;
  margin-top: 40px;
  font-size: 16px;
  border-width: 1px;
  border-style: solid;
  border-color: #dfdfdf;
}
.signline {
  background: #55b1ff;
  width: 276px;
  height: 1px;
  position: absolute;
  top: 13px;
  opacity: 0.5;
  left: 12px;
}
</style>
